<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态相册</title>
		<style>
		table{
			color: #00FFFF;
			text-align: center;
			font-size: 20px;
			font-family: "楷体";
			width: 500px;
			height: 300px;
		}
		.div1{
			position: absolute;
			left: 50%;
			margin-left: -250px;
			top: 50%;
			margin-top: -9.375rem;
		}
		#image{
			border-radius: 50%;
		}
		</style>
	</head>
	<body onload="change2()">
		<div class="div1">
			<table cellspacing="0" cellpadding="0">
				<tr>
					<td rowspan="5"><img src="images/tu.jpg" id="image"  width="200px"></td>
					<td colspan="2"><input type="text" id="in" /> <button onclick="fun4()">搜索</button></td>
				</tr>
				
				<tr>
					<td class="name">兵马俑</td>
					<td class="name">川菜</td>
				</tr>
				
				<tr>
					<td class="name">客家土楼</td>
					<td class="name">民族乐器</td>
				</tr>
				
				<tr>
					<td class="name">青铜重器</td>
					<td class="name">新疆风情</td>
				</tr>
				
				<tr>
					<td class="name">粤菜</td>
					<td class="name">中国国宝</td>
				</tr>
			</table>
		</div>
		<script>
		var m=1;
		var change1=0.1;
		function change2(){
			if(m>1){
				change1=-0.1;
			}else if(m<0.5){
				change1=0.1;
			}
			m=m+change1;
			image.style.opacity=m;
			setTimeout(change2,200);
		}
		function getObj(){
			if(window.event){
				event=window.event;
				otarget=event.srcElement;
			}else{
				otarget=event.otarget;
			}
			return otarget;
		}
		function fun1(){
			window.location.href="https://image.baidu.com/search/index?tn=baiduimage&word="+obj.innerHTML;
		}
		function fun2(){
			clearTimeout(T);
			index=1;
			obj=getObj();
			image=document.getElementById("image");
			var name = obj.innerHTML;
			image.src="images/"+name+"/1.jpg";
		}
		var T;
		var index=1;
		function fun3(){
			index++;
			if(index>7){
				index=1;
			}
			image.src="images/"+obj.innerHTML+"/"+index+".jpg";
			T=setTimeout(fun3,1000);
		}
		function fun4(){
			var mm=document.getElementById("in");
			var text=mm.value;
			if(text!=""){
				window.location.href="https://image.baidu.com/search/index?tn=baiduimage&word="+text;
			}
		}
		</script>
		
		<script>
		var eles=document.getElementsByClassName("name");
		for(var i=0;i<eles.length;i++){
			eles[i].addEventListener('click',fun1,false);
			eles[i].addEventListener('mouseover',fun2,false);
			eles[i].addEventListener('mouseout',fun3,false);
		}
		image=document.getElementById("image");
		</script>
	</body>
</html>
